<template>
  <div class="loading" v-if="load_bool" @mouseover="disload">
    <div class="loading-white" :style="{bcakgroundColor:load_bgcolor,opacity:load_op}">
      <div class="loading-bear">
        <h1 class="loadingtext">
          <div class="load_black" :style="{opacity:black_bgop}" v-if="back_bgbool"></div>
          <span>L</span>
          <span>o</span>
          <span>a</span>
          <span>d</span>
          <span>i</span>
          <span>n</span>
          <span>g</span>
          <span>{{parseInt((loadtime-900)/10)}}</span>
          <span>......</span>
        </h1>
        <!--<vue-loading type="balls" color="black" :size="{ width: '80px'}"></vue-loading>-->
      </div>
    </div>
  </div>
</template>
<script>
  import vueLoading from 'vue-loading-template'
  export default{
    data(){
      return{
        load_bool:true,
        back_bgbool:true,
        loadtime:1300,
        load_op:1,
        black_bgop:1,
        load_bgcolor:'rbg(0,0,0)'
      }
    },
    methods:{
      disload:function(){
        console.log('选中');
      }
    },
    components:{
      vueLoading
    },
    mounted:function(){
      var _this=this;
      var time=window.setInterval(function () {
        _this.loadtime-=1;
        _this.black_bgop=_this.black_bgop*(_this.loadtime/1300);
        if(_this.loadtime<1000){
          _this.black_bgbool=false;
          _this.load_op=_this.load_op*((_this.loadtime+500)/1500);
          if(_this.loadtime<500){
            _this.load_bool=false;
            window.clearInterval(time);
          }
        }
      },1);
    }
  }
</script>
<style>
  @import "../css/loading.css";
  .loading{
    font-size: 10px;
    top: 8%;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  .loading-white{
    position: inherit;
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: -webkit-center;
  }
  .loading-bear{
    margin-top: 20%;
  }
  .load_black{
    margin-top: -20%;
    opacity: 0.5;
    background-color: rgb(0,0,0);
    width: 100%;
    height: 100%;
    position: absolute;
  }
</style>

